<template>
  <div style="padding: 8px">
    <div class="ke__panel">
      <div class="ke__panel-head">
        <el-button size="small" @click="onClickBack">返回</el-button>

        <el-button size="small" :loading="subing" type="primary" @click="$refs.form.onSubmit()">
          <i class="icon icon-save" style="font-size: 12px"/>
          保存
        </el-button>
      </div>

      <div class="ke__panel-body" v-loading="loading">
        <k-form ref="form" :data="form" @submit="onFormSubmit" class="ke__margin" label-width="100px">
          <el-row>
            <el-col :span="12">
              <k-form-item label="学校" prop="school_id" :validate="['required']">
                <el-select v-model="form.school_id">
                  <el-option v-for="cate in school" :key="cate.id" :label="cate.name" :value="cate.id"/>
                </el-select>
              </k-form-item>
            </el-col>

            <el-col :span="12">
              <k-form-item label="城市" prop="area_id" :validate="['required']">
                <k-city-select v-model="areaId" :data="$store.getters['area/list']"/>
              </k-form-item>
            </el-col>
          </el-row>

          <k-form-item label="标题" prop="name" :validate="['required']">
            <el-input v-model="form.name"/>
          </k-form-item>

          <k-form-item label="封面" prop="thumb" :validate="['required']">
            <k-simple-upload v-model="form.thumb"/>
          </k-form-item>

          <el-row>
            <el-col :span="12">
              <k-form-item label="最低学历" prop="edu" :validate="['required']">
                <el-select v-model="form.edu">
                  <el-option value="小学/初中"/>
                  <el-option value="中技"/>
                  <el-option value="高中"/>
                  <el-option value="大专"/>
                  <el-option value="大学"/>
                </el-select>
              </k-form-item>
            </el-col>

            <el-col :span="12">
              <k-form-item label="报名费用" prop="money" :validate="['required']">
                <el-input v-model="form.money"/>
              </k-form-item>
            </el-col>
          </el-row>

          <k-form-item label="子标题" prop="subtitle" :validate="['required']">
            <el-input v-model="form.subtitle" placeholder="请填写长度在255内的子标题"
                      type="textarea" rows="4"/>
          </k-form-item>

          <k-form-item label="报名日期" prop="start_time" :validate="['required']">
            <el-date-picker
              v-model="date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </k-form-item>

          <el-row>
            <el-col :span="12">
              <k-form-item label="招生人数" prop="number" :validate="['required']">
                <el-input v-model="form.number"/>
              </k-form-item>
            </el-col>

            <el-col :span="12">
              <k-form-item label="咨询电话" prop="tel" :validate="['required']">
                <el-input v-model="form.tel"/>
              </k-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <k-form-item label="培训周期" prop="cycle" :validate="['required']">
                <el-select v-model="form.cycle">
                  <el-option value="一个月内"/>
                  <el-option value="三个月内"/>
                  <el-option value="半年内"/>
                  <el-option value="一年内"/>
                </el-select>
              </k-form-item>
            </el-col>

            <el-col :span="12">
              <k-form-item label="培训时间" prop="time" :validate="['required']">
                <el-select v-model="form.time">
                  <el-option label="全日制" :value="0"/>
                  <el-option label="非全日制" :value="1"/>
                </el-select>
              </k-form-item>
            </el-col>
          </el-row>


          <k-form-item label="课程描述" prop="content" :validate="['required']" class="no-line-height">
            <k-editor v-model="form.content" :image="uploadImageOptions"/>
          </k-form-item>
        </k-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import { getHeaders, baseUrl } from '@/library/http'
import KEditor from '@/components/editor'
import KSimpleUpload from '@/components/simple-upload/index'
@Component({
  components: {
    KSimpleUpload,
    KEditor
  }
})
export default class CertForm extends Vue {
  loading = false
  school = []
  form = {
    cycle: '一个月内',
    time: 0
  }
  subing = false

  get date () {
    if (!this.form.start_time || !this.form.end_time) {
      return []
    }
    return [
      this.form.start_time,
      this.form.end_time
    ]
  }

  set date(val) {
    this.$set(this.form, 'start_time', val[0])
    this.$set(this.form, 'end_time', val[1])
  }

  get areaId () {
    if (!this.form.area_id) {
      return ''
    }
    return this.form.area_id.toString()
  }

  set areaId(val) {
    this.$set(this.form, 'area_id', val)
  }

  // 上传配置
  get uploadImageOptions() {
    return {
      action: `${baseUrl}/admin/upload/image`,
      headers: getHeaders()
    }
  }

  // 返回
  onClickBack () {
    this.$ke_router.replace({
      name: 'Edu',
    })
  }

  // 初始化
  mounted () {
    this.$http.get('admin/school')
      .then((result) => {
        this.school = result.list
      })
    if (this.$route.query.id !== '0') {
      this.getRead(this.$route.query.id)
    }
  }

  // 路由更新
  beforeRouteUpdate (to, from, next) {
    if (to.query.id !== from.query.id) {
      this.getRead(to.query.id)
    }
    next()
  }

  // 获取文章信息
  getRead (id) {
    this.loading = true
    this.$http.get(`admin/cert/${id}`)
      .finally(() => this.loading = false)
      .then((result) => {
        if (result.res_code === 0) {
          this.form = result.data
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }

  // 表单提交
  onFormSubmit () {
    this.subing = true
    this.$http.post('admin/cert', this.form)
      .finally(() => this.subing = false)
      .then((result) => {
        if (result.res_code === 0) {
          this.$router.replace({
            query: {
              ...this.$route.query,
              id: result.data.id
            }
          })
          this.form = result.data
          this.$message.success('保存成功')
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }
}
</script>

<style scoped lang="scss">
  .no-line-height {
    /deep/ .el-form-item__label {
      margin-top: 10px;
    }
    /deep/ .el-form-item__content, /deep/ .el-form-item__label {
      line-height: normal !important;
    }
  }
</style>
